<html>
  <head>
    <title>Basecamp календарик</title>
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="/static/styles.css" />
    <script type="text/javascript">

    function setMonthFilter() {
        document.getElementById('month_filter').options['month_{{ report.month_filter }}'].selected = true;
    }

    // ID of the last pressed day-button
    var lastClickedId;
    var lastClickedClass;

    function displayTimeEntries(elem) {
        var id = elem.firstChild.nodeValue;
        if (lastClickedId) {
        
            var lastClicked = document.getElementById(lastClickedId)
            var lastBlockId = lastClicked.firstChild.nodeValue
            var lastBlock = document.getElementById(lastBlockId)
            lastBlock.style.display = 'none';
            lastClicked.className = lastClickedClass;
        }
        var entries = document.getElementById(id);
        if (entries) {
            lastClickedId = elem.id;
            entries.style.display = 'block';
            lastClickedClass = elem.className; 
            elem.className = 'selected';
        }
    }

    function filterCalendar() {
        document.getElementById('filter').submit();
    }
    </script>
  </head>
  <body onload="setMonthFilter();">
    <div id="wrapper">
      <h1>Календарик</h1>
      <div id="user_info" align="right">
        <span>{{ report.username  }}</span>
        <a href="/logout" id="logout_btn">
          <span>Вийти</span>
        </a>
      </div>
      <h2>Сьогодні {{ report.dt|date:"l" }}, {{ report.dt|date:"j" }} {{ report.dt|date:"F" }} {{ report.dt|date:"Y" }} року</h2>
      <p>Подивись скільки часу ти працював цього місяця і подумай над цим :)</p>
      <form id="filter" action="/" method="POST">
        <div id="date_filter">
          <select id="month_filter" name="month_filter" onchange="filterCalendar();">
            <option id="month_1" value="1">Січень</option>
            <option id="month_2" value="2">Лютий</option>
            <option id="month_3" value="3">Березень</option>
            <option id="month_4" value="4">Квітень</option>
            <option id="month_5" value="5">Травень</option>
            <option id="month_6" value="6">Червень</option>
            <option id="month_7" value="7">Липень</option>
            <option id="month_8" value="8">Серпень</option>
            <option id="month_9" value="9">Вересень</option>
            <option id="month_10" value="10">Жовтень</option>
            <option id="month_11" value="11">Листопад</option>
            <option id="month_12" value="12">Грудень</option>
          </select>
          <select id="year_filter" name="year_filter" onchange="filterCalendar();">
            {% for year in report.years %}
            <option {% ifequal year report.year_filter %} selected {% endifequal %}
              id="year{{ year }}" value="{{ year }}">{{ year }}</option> 
            {% endfor %}
          </select>
        </div>
        <select id="project_filter" name="project_filter" onchange="filterCalendar();"> 
          {% for project in report.projects %}
          <option {% ifequal project.0 report.project_filter %} selected {% endifequal %}   
            id="project_{{ project.0 }}" value="{{ project.0 }}">{{ project.1 }}</option>
          {% endfor %}
        </select>
      </form>
      <div id="total">Загалом: <span>{{ report.total_hours|floatformat:2 }}</span> год.</div>
      <div class="calendar">
        <ul class="days">
          <li>Пн</li>
          <li>Вт</li>
          <li>Ср</li>
          <li>Чт</li>
          <li>Пт</li>
          <li>Сб</li>
          <li>Нд</li>
        </ul>
        {% for week in report.weeks %}
        <ul class="week">
          {% for day in week %}
          {% if day %}
          <li onclick="displayTimeEntries(this);" id="calday{{ day.day }}" class="{{ day.style }}">{{ day.day }}</li>
          {% else %}
          <li class="{{ day.style }}"></li>
          {% endif %}
          {% endfor %}
        </ul>
        {% endfor %}
      </div>
      <div class="timeentries">
        {% for day in report.entries %}
        <dl id="{{ day.day }}" style="display: none;">
            <dd>
              {% regroup day.time_entries by projectref as grouped %}
              <br/>
              {% for project_entries in grouped %}
              <a class="projectname" target="_blank" 
                  href="{{ report.root }}/projects/{{ project_entries.grouper.0  }}">
                {{ project_entries.grouper.1 }}:
              </a>
              <ul>
                {% for entry in project_entries.list %}
                <li>{{ entry.description }} - {{ entry.hours|floatformat:2 }} год. </li>
                {% endfor %}
              </ul>
              {% endfor %}
            <span>Загалом: {{ day.formatted_time }} год.</span>
            </dd>
        </dl>
        {% endfor %}
      </div>
      <ul class="help">
        <li class="one">1</li>
        <li class="two">2</li>
        <li class="three">3</li>
        <li class="four">4</li>
        <li class="five">5</li>
        <li class="six">6</li>
        <li class="seven">7</li>
        <li class="eight">8</li>
        <li class="more">&gt;8</li>
      </ul>
    </div>
  </body>
</html>
